<script lang="ts" setup>
import Top from './components/Top.vue'
import Links from './components/Links.vue'
import Bottom from './components/Bottom.vue'
import Catalog from './components/Catalog.vue'
import Point from './components/Point.vue'
import Material from './components/Material.vue'

// 选中的tab
const activeLink = $ref(0)

const {videoInfo, init} = $(useVideo())

// 截取海报介绍地址
const summary = computed(() => {
    const summary = videoInfo?.summary
            .replace('<img src="', '')
            .replace('" style="width:100%" />', '')
            .replace('" style="width:100%"/>', '')
    return summary ?? ''
})
// 获取当前课程id
onLoad((query) => {
    const videoId = query?.id
    init(Number(videoId))
})

onPageScroll(() => {
    uni.$emit('canScrollDetails', true)
})

watch(
        () => activeLink,
        () => uni.$emit('canScrollDetails', false)
)
</script>

<template>
    <view h-full flex-1>
        <!-- 顶部导航栏 -->
        <Top/>
        <!-- tab选项 -->
        <view px-3 flex="~ col">
            <Links v-model:activeIdx="activeLink" flex-shrink-0
                   :links="['课程介绍', '课程目录', '用户评价', '课程资料']" :base="4"/>
            <view flex-1>
                <image v-show="activeLink === 0" mode="widthFix" class="w-full" :src="summary"/>
                <view v-show="activeLink === 1">
                    <!-- 课程目录 -->
                    <Catalog/>
                </view>
                <view v-show="activeLink === 2">
                    <!-- 用户评价 -->
                    <Point/>
                </view>
                <view v-show="activeLink === 3">
                    <!-- 课程资料 -->
                    <Material/>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <Bottom/>
    </view>
</template>
